<template>
  <div>
    <van-cell-group title="账户设置">
      <van-cell
        value="修改密码"
        is-link
        @click="popShow.changePsw = true"
      />
    </van-cell-group>
    <!-- 退出登录按钮 -->
    <van-button
      type="danger"
      block
      style="width: 80%;margin: 0 auto;margin-top: 0.5rem;"
      @click="doLogoutAction"
    >退出登录</van-button>
    <!-- 修改密码弹出框 -->
    <van-dialog
      v-model="popShow.changePsw"
      title="修改密码"
      show-cancel-button
      @cancel="cancelChangePsw"
      @confirm="doChangePsw"
    >
      <van-field
        v-model="formData.changePsw.oldPassword"
        type="password"
        label="旧密码"
        placeholder="输入旧密码..."
        required
      />
      <van-field
        v-model="formData.changePsw.newPassword"
        type="password"
        label="新密码"
        placeholder="输入新密码..."
        required
      />
      <van-field
        v-model="formData.changePsw.rePassword"
        type="password"
        label="确认密码"
        placeholder="再次输入新密码..."
        required
      />
    </van-dialog>
  </div>
</template>

<script>
import { Toast, CellGroup, Cell, Dialog, Field } from 'vant'
import { encode } from '@/utils/encoder'

export default {
  name: 'MineSettings',
  components: {
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    [Dialog.Component.name]: Dialog.Component,
    [Field.name]: Field
  },
  data () {
    return {
      username: '',
      popShow: {
        changePsw: false
      },
      formData: {
        changePsw: {
          username: '',
          oldPassword: '',
          newPassword: '',
          rePassword: ''
        }
      }
    }
  },
  created () {
    this.username = this.$route.query.username
  },
  methods: {
    toMinePage () { // 跳转“我的”页面
      this.$router.replace({
        name: 'Mine'
      })
    },
    doLogoutAction () { // 处理退出登录
      this.$store.dispatch('user/logout').then(({ message }) => {
        Toast.success(message)
        this.toMinePage()
      }).catch(() => { })
    },
    doChangePsw () {
      // 表单校验
      const reqData = this.formData.changePsw
      reqData.username = this.username
      if (!reqData.oldPassword || !reqData.newPassword || !reqData.rePassword) {
        Toast.fail({
          message: '请完整填写信息',
          duration: 1000
        })
        this.cancelChangePsw()
        return
      }
      if (reqData.newPassword !== reqData.rePassword) {
        Toast.fail({
          message: '两次密码输入不一致',
          duration: 1000
        })
        this.cancelChangePsw()
        return
      }
      // 对密码字段进行加密
      reqData.oldPassword = encode(reqData.oldPassword)
      reqData.newPassword = encode(reqData.newPassword)

      this.$store.dispatch('user/changePsw', reqData).then(() => {
        Toast.success({
          message: '密码修改成功，请重新登录',
          duration: 1000
        })
        this.toMinePage()
      }).catch(() => {
        console.log(111)
        this.cancelChangePsw()
      })
    },
    cancelChangePsw () {
      this.formData.changePsw = {
        username: '',
        oldPassword: '',
        newPassword: ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>
